<%@ page language="java" import="java.util.List" pageEncoding="utf-8" %>
<%@page import="cn.com.wxd.entity.website.CatalogInfo" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=basePath %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/><!-- 强制浏览器使用最新的内核，解决了bootstrap在IE兼容模式下无法使用的问题 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>栏目</title>
    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="static/admin/css/bootstrap/css/bootstrap-3-3-5.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="static/util/plugins/layui/css/layui.css"/>

    <script type="text/javascript" src="static/js/jquery1-11-3.min.js"></script>
    <script type="text/javascript" src="static/util/js/bootstrap3-3-5.min.js"></script>
    <script type="text/javascript" src="static/util/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="static/admin/js/catalogTreeJquery.js"></script>
    <script type="text/javascript">
        var layer;
        var loading;
        $(function () {
            //加载弹出层组件
            layui.use('layer', function () {
                layer = layui.layer;
                layer.config({skin: 'layui-layer-molv',});
                artcatalogInit("<%=request.getAttribute("caid")%>");
            });
        });
        //这个方法是每个节点单击后执行的操作。
        function FListajax(caid, pageIndex) {
            //显示加载图标
            showLoading()
            $.ajax({
                type: "get",
                url: "admin/website/article/articlelist",
                data: {
                    "caid": caid,
                    "pageSize": "24",
                    "pageIndex": pageIndex
                }, //指定页容量(分页)
                success: function (result) {
                    loadingClose();
                    if (result == null || result == "") {
                        $("#right")
                            .html(
                                "<span style=\"font-size:20px;font-color:red;\"><i class='glyphicon glyphicon-exclamation-sign'></i>数据获取失败，请重试！</span>");
                    } else {
                        $("#right").html(result);
                    }
                }
            });
        }
        //确认对话框
        function modalClick() {
            $('#cataListModal').modal('hide');  //隐藏模态框
            //显示加载动态图标
            showLoading();
            var cataId = $("#cataIdValue").val();
            var ids = $("#ArticieIds").val();
            var type = $("#WorkType").val();
            var actionName = "";
            var tipMess = "";
            if (type == "clone") {
                actionName = "/cloneArticle";  //克隆文章
                tipMess = "克隆";
            } else {
                actionName = "/moveArticle";  //移动文章
                tipMess = "移动";
            }
            if (cataId != "" && ids != "") {
                //进行ajax操作文章
                $.ajax({
                    type: "get",
                    url: "admin/website/article" + actionName,
                    data: {
                        "caid": cataId,
                        "ids": ids
                    }, //指定页容量(分页)
                    success: function (result) {
                        loadingClose();
                        if (!result.success) {
                            OutMessageBox(tipMess + "失败!", 3000);
                        } else {
                            var level = $("#" + cataId).attr("level");
                            var child = $("#" + cataId).parent('li.parent_li').find(' > ul > li');
                            child.show();
                            $("#" + cataId).attr('title', '点击关闭').find(' > i').removeClass('glyphicon glyphicon-chevron-right').addClass('glyphicon glyphicon-chevron-down');
                            child = "$(\"#" + cataId + "\").parent()";  //获取当前默认选中的节点的容器
                            var childspan = "$(\"#" + cataId + "\")";  //获取当前选中的节点
                            eval(child + ".show().siblings().show()");   //同级的容器全部显示
                            for (var i = 0; i < level - 2; i++) {  //根据节点深度进行循环一层层剥开
                                child += ".parent().parent()";
                                childspan += ".parent().parent().parent().find(\"span\")";
                                eval(child + ".show().siblings().show()"); //同级的容器全部显示
                                eval(childspan + ".attr('title','点击关闭').find(' > i').removeClass('glyphicon glyphicon-chevron-right').addClass('glyphicon glyphicon-chevron-down')");
                            }
                            FListajax(cataId, "1");
                            OutMessageBox(tipMess + "成功!", 3000);
                        }
                    }
                });
            }
        }

        function OutMessageBox(content, time) {
            layer.msg(content, {time: time});
        }

        function showLoading() {
            loading = layer.load(1, {time: 10 * 1000, shade: [0.6, '#424242']});
        }

        function loadingClose() {
            layer.close(loading);
        }
    </script>

</head>
<body style="overflow:hidden">
<div class="container-fluid">
    <div class="row" id="a">
        <!-- 左侧栏目树 -->
        <div class="col-xs-3 col-sm-3 col-md-3" id="left">
            <div class="tree well">
                <ul style="-webkit-padding-start: 40px">
                    <%=request.getAttribute("catalogTreeDom")%>
                </ul>
                <br/> <br/>
            </div>
        </div>
        <!-- 右侧相关内容 -->
        <div class="col-xs-9 col-sm-9 col-md-9" id="right"
             style="border:solid 1px #999999; height:735px; position: relative">
            <!-- content in the div -->
        </div>
        <!-- 隐藏的栏目Modal框 -->
        <div class="modal fade" id="cataListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">选择栏目</h4>
                    </div>
                    <div class="modal-body" style="OVERFLOW: auto;">
                        <div style="height: 300px;min-height: 200px;">
                            <input type="hidden" id="cataIdValue" value=""/>
                            <table>
                                <%
                                    List<CatalogInfo> cataList =
                                            (List<CatalogInfo>) request.getAttribute("allCatalogs");
                                    if (cataList != null && cataList.size() > 0) {
                                        for (int i = 0; i < cataList.size(); i = i + 2) {

                                %>
                                <tr>
                                    <td><input type="radio" name="SelectCata"
                                               onclick="javascript:document.getElementById('cataIdValue').value='<%=cataList.get(i).getId() %>'"/>
                                    </td>
                                    <td><%=cataList.get(i).getCataCode() %>
                                    </td>
                                    <td><%=cataList.get(i).getName() %>
                                    </td>
                                    <%
                                        if (cataList.size() > i + 1) {
                                    %>
                                    <td>&nbsp;</td>
                                    <td><input type="radio" name="SelectCata"
                                               onclick="javascript:document.getElementById('cataIdValue').value='<%=cataList.get(i+1).getId() %>'"/>
                                    </td>
                                    <td><%=cataList.get(i + 1).getCataCode() %>
                                    </td>
                                    <td><%=cataList.get(i + 1).getName() %>
                                    </td>
                                    <%
                                        }
                                    %>
                                </tr>
                                <%
                                        }
                                    }
                                %>

                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="modalClick()">确 认</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

